<template>
  <div>
    <!--视频-->
    <div class="video-container">
      <video controls autoplay muted loop>
        <source src="../assets/iso.mp4" type="video/mp4">
      </video>
    </div>
    
    
    <div class="section-container">
      <div class="section" v-for="(section, index) in sections" :key="index" 
           @mouseover="highlightSection(index)" 
           @mouseleave="removeHighlightSection(index)" 
           @click="navigateTo(section.link)" 
           :class="{ highlighted: highlightedSections[index] }">
        <h2>{{ section.title }}</h2>
        <p>{{ section.description }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      sections: [
        { title: '准心站', description: '来这里挑选心仪的准心吧', link: 'https://act.wegame.com.cn/wand/danji/valorantstar/' },
        { title: '仁川冠军赛', description: '恭喜EDG获得全球总冠军', link: 'https://www.edgteam.cn/' },
        { title: '近期赛事', description: '绝绝杯娱乐赛正在进行', link: '' },
      
      ],
      highlightedSections: []
    };
  },
  methods: {
    highlightSection(index) {
      this.$set(this.highlightedSections, index, true);
    },
    removeHighlightSection(index) {
      this.$set(this.highlightedSections, index, false);
    },
    navigateTo(link) {
      window.location.href = link; 
    }
  }
};
</script>

<style>
.video-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.video-container video {
  width: 100%;
  height: auto;
}

.section-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 20px;
}

.section {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  margin: 10px;
  width: 30%;
  transition: background-color 0.3s, cursor 0.3s; 
  cursor: pointer; 
}

.section:hover {
  cursor: pointer; 
}

.highlighted {
  background-color: #695cfe; 
}
</style>